<template>
  <div class="box">
    <div class="head">发起提现</div>
    <div class="list fir">
      <img class="red" src="../../images/main/red.png" alt>
      <span class="txt">姓名：</span>
      <span>{{info.account.accountName}}</span>
    </div>
    <div class="list">
      <img class="red" src="../../images/main/red.png" alt>
      <span class="txt">银行名称：</span>
      <span>{{info.account.bankName}}</span>
    </div>
<!-- 
    <div class="list">
      <img class="red" src="../../images/main/red.png" alt>
      <span class="txt">税号：</span>
      <span>{{info.account.dutyParagraph}}</span>
    </div> -->
    <div class="list">
      <img class="red" src="../../images/main/red.png" alt>
      <span class="txt">银行账号：</span>
      <span>{{info.account.bankAccount}}</span>
    </div>
    <div class="smoney">
      <img class="red" src="../../images/main/red.png" alt>
      <span class="txt">提额金额：</span>
      <input type="number" placeholder="请输入提现金额" v-model="price" @input="setMoney()">
      <span class="red">当前可提现{{info.balance}}元。</span>
    </div>
    <div class="info">备注：审核通过后，平台将在3-5个工作日内打款，若要修改银行账户信息请联系平台工作人员。</div>
    <div class="btn" @click="setInitiation()">提交审核</div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      price: "",
      info: {
        account:{
          accountName:'',
          bankName:'',
          dutyParagraph:'',
          bankAccount:'',
        }
      },
      sum:true
    };
  },
  methods: {
    setMoney: function () {
		  this.price = Math.round(this.price.replace(/\./g,''))
		  if(this.price < 1) {
			  this.price = 0
      }
      if (this.price > this.info.balance) {
        this.price = this.info.balance
      }
	  },
    /**
     * 获取提现详情
     */
    getInDetals: function () {
      let that = this;
      axios({
        method: "post",
        url: `withdrawal/selectAccountByServiceId`,
        data: qs.stringify({
          serviceId: this.$store.state.userId,
        })
      }).then(res => {
        if (res.data.code == 0) {
          that.info = res.data.data
        } else {
          that.$alert(res.data.msg);
        }
      })
    },
    /**
     * 提现
     */
    setInitiation: function() {
      if ( this.info.balance == 0 ) {
        this.$message ({
          message: '您的余额为0',
          type: 'warning'
        });
        return;
      }
      let that = this
      if(!that.sum) {
        return
      }
      that.sum = false
      axios({
        method: "post",
        url: `${this.$store.state.url}/withdrawal/addWithdrawal`,
        data: qs.stringify({
          withdrawalUser: this.$cookie.get('serviceId'),
          price: that.price
        })
      }).then(res => {
        that.sum = true
        if (res.data.code == 0) {
          this.$store.state.fn.success( res.data.msg ).then (() => {
              this.$router.push({
                path:'/main/finance',
                name: 'finance'
              })
            });
        } else {
          this.$alert ( res.data.msg );
        }
      })
    }
  },
  mounted () {
    this.getInDetals()
  }
};
</script>
<style scoped>
.box {
  background: #ffffff;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  width: 861px;
  height: 816px;
  margin: 66px auto;
}
.head {
  height: 104px;
  text-align: center;
  font-size: 24px;
  color: #000;
  line-height: 104px;
  border-bottom: 3px solid #f5f5f5;
  font-weight: bold;
}
.list {
  height: 25px;
  line-height: 25px;
  padding-left: 245px;
  font-weight: bold;
  /*margin-top: 68px;*/
  margin-top: 24px;
}
.list.fir {
  margin-top: 52px;
}
.txt {
  width: 90px;
  display: inline-block;
  font-weight: bold;
  margin-right: 67px;
}
.list img {
  width: 10px;
  height: 10px;
  padding: 7.5px;
  float: left;
}
.line {
  background: #f5f5f5;
  width: 861px;
  height: 3px;
  margin-top: 48px;
}
input {
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 317px;
  height: 40px;
  font-size: 18px;
  color: #4a4a4a;
  margin-right: 18px;
  text-align: center;
}
.smoney {
  padding-left: 110px;
  height: 40px;
  line-height: 40px;
  margin-top: 46px;
}
.smoney .txt {
  margin-right: 40px;
}
.red {
  color: #fd0404;
  font-size: 14px;
  font-weight: bold;
}
.info {
  text-align: center;
  height: 20px;
  line-height: 20px;
  color: #fd0404;
  font-size: 14px;
  font-weight: bold;
  margin-top: 27px;
}
.btn {
  margin: 0 auto;
  margin-top: 72px;
  background: #085dab;
  width: 255px;
  height: 55px;
  font-size: 18px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  line-height: 55px;
  cursor: pointer;
}
</style>
